<!--
 * @Author: your name
 * @Date: 2021-10-19 15:21:34
 * @LastEditTime: 2021-10-22 19:09:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Vuec:\Users\86131\Desktop\project\payforknowledge\src\views\login.vue
-->
<!-- 登录 -->
<template>
  <div class="bg">
    <!-- 导航栏 -->
    <van-nav-bar
      title="登录"
      left-text=""
      right-text="注册"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 图片 -->
    <div class="picture">
      <img src="../../src/assets/img/login.png" alt="" />
    </div>
    <!-- 输入框 -->
    <van-cell-group inset>
      <van-field v-model="phone" placeholder="请输入手机号/用户名" />
    </van-cell-group>
    <van-cell-group inset>
      <van-field v-model="code" placeholder="请输入密码" />
    </van-cell-group>
    <!-- 按钮 -->
    <van-button type="primary" size="large" @click="onlogin" color="#4AB8FA"
      >登录</van-button
    >
    <!-- 忘记密码 -->
    <div class="pwd">
      <span>忘记密码</span>
      <span>短信登录</span>
    </div>
  </div>
</template>

<script>
import { NavBar } from "vant";
import { Field, CellGroup } from "vant";
import { Button } from "vant";
import { useRouter } from "vue-router";

import { useStore } from "vuex";
import { ref, computed } from "vue";
export default {
  setup() {
    const router = useRouter();
    const store = useStore();
    const onClickLeft = () => router.push("/");
    const onClickRight = () => router.push("/register");
    let code = ref([code]);
    let phone = ref([phone]);

    const member = computed(() => store.state.login.login);
    // const username =member.phone
    const onlogin = async () => {
      await store.dispatch("getLogin", {
        phone: phone.value,
        code: code.value,
      });
      console.log(member.value.status);
      if (member.value.status != 0) {
        alert(member.value.msg);
        phone.value = "";
        code.value = "";
      } else {
        console.log(member.value);
        localStorage.setItem("username", member.value.result.phone);
        localStorage.setItem("token", member.value.result.token);

        // localStorage.setItem("code", code.value);
        router.push("/");
      }
    };
    return {
      onClickLeft,
      onClickRight,
      onlogin,
      code,
      phone,
      member,
    };
  },
  components: {
    VanNavBar: NavBar,
    VanCellGroup: CellGroup,
    VanField: Field,
    VanButton: Button,
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar .van-icon {
  font-size: 24px;
  color: #fff;
}
.van-nav-bar {
  background: #4ab8fa;
}
/deep/ .van-nav-bar__title {
  font-size: 17px;
  color: #fff;
}
/deep/.van-nav-bar__text {
  font-size: 17px;
  color: #fff;
}
.bg {
  background: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
  .picture {
    text-align: center;
    padding: 70px;
    img {
      width: 160px;
      height: 160px;
    }
  }
}
/deep/ .van-field__control {
  font-size: 18px;
  border-bottom: 1px solid #e2e2e2;
  height: 30px;
  line-height: 30px;
}
.van-button--large {
  border-radius: 30px;
  width: 280px;
  color: black;
  font-size: 17px;
}
.van-button--primary {
  background: #e3e3e3;
  border: 0;
  margin: auto;
  display: block;
  margin-top: 30px;
  height: 48px;
}
.pwd {
  display: flex;
  justify-content: space-between;
  padding: 20px 10px;
  span {
    font-size: 16px;
    color: #b0b0b0;
  }
}
</style>
